<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Highcharts Example</title>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script type="text/javascript">
		$(function () {
			$('#container').highcharts({
				chart: {
					type: 'spline'
				},
				title: {
					text: 'Monthly Average Temperature'
				},
				subtitle: {
					text: 'Source: WorldClimate.com'
				},
				xAxis: {
					categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
						'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
				},
				yAxis: {
					title: {
						text: 'Temperature'
					},
					labels: {
						formatter: function () {
							return this.value + '°'
						}
					}
				},
				tooltip: {
					crosshairs: true,
					shared: true
				},
				plotOptions: {
					spline: {
						marker: {
							radius: 4,
							lineColor: '#666666',
							lineWidth: 1
						}
					}
				},
				series: [{
					name: 'Tokyo',
					marker: {
						symbol: 'square'
					},
					data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
						y: 26.5,
						marker: {
							symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
						}
					}, 23.3, 18.3, 13.9, 9.6]

				}, {
					name: 'London',
					marker: {
						symbol: 'diamond'
					},
					data: [{
						y: 3.9,
						marker: {
							symbol: 'url(http://www.highcharts.com/demo/gfx/snow.png)'
						}
					}, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
				}]
			});
		});


	</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

</body>
</html>
